<template>
  <div id='box'>
    <div>
      <ul :class="fixed?'newtop':'top'" >
        <li>
          <span  @click="back">退出当前账号</span>
        </li>
        <li>
          <span @click="post">我的发布</span>
        </li>
        <li>
          <span @click="show">编辑资料</span>
        </li>
        <li>
          <span @click="postArt">发布文章</span>
        </li>
      </ul>
    </div>
    <div class="main">
        <el-col :span="18" class="content">
         <ul class="art">
          <li v-for="data in datalist" :key="data.aid">
            <div class="content_top" >
              <img :src="'http://localhost:3000/'+data.pho" alt="">
              <div>
                <div class="font">{{ data.name }}</div>
                <div class="date">{{ data.date | dateChage }}</div>
              </div>
            </div>
            <div class="content_bot" @click="display({uid:data.uid,aid:data.aid})">
              <div class="font">{{ data.header }}</div>
              <div v-html="data.content"></div>
            </div>
            <div class="bott">
              <div><i class="el-icon-view"></i>{{ data.look }}</div>
              <!-- <div><i :class="zan?'el-icon-star-on':'el-icon-star-off'" @click="add({uid:data.uid,aid:data.aid})"></i>{{ data.zan }}</div>-->
            </div>
          </li>
         </ul>
        </el-col>
        <el-col :span="6">
          <div :class="fixed?'newinfo':'info'">
            <div  class="big">
               <div class="Img">
                <el-tooltip content="修改信息" placement="bottom" effect="light">
                  <img :src="imageUrl" alt="" @click="show">
                </el-tooltip>
                </div>
            </div>
            <ul class="infoList">
              <div class="num">
                <div>
                  {{ datalist.length }}
                </div>
                <div>
                  {{ datalist | num  }}
                </div>
              </div>
              <div class="txt">
                <div>
                  文章发布数
                </div>
                <div>
                  文章浏览数
                </div>
              </div>
            </ul>
          </div>
          <div :class="fixed?'newlist':'list'">
            用户列表
              <ul class="user">
                <li v-for="data in Userlist" :key="data.name">
                  <img :src="'http://localhost:3000'+data.pho " alt="">
                  <span>{{ data.name }}</span>
                  <i class="el-icon-chat-dot-round" @click="chat"></i>
                </li>
            </ul>
          </div>
        </el-col>
    </div>
  </div>
</template>

<script>
import http from '@/util/http'
import Vue from 'vue'

Vue.filter('num', datalist => {
  let num = 0
  datalist.forEach(data => {
    num = num + data.look
  })
  return num
})

export default {
  mounted () {
    this.render()
    this.renderPho()
    this.renderUser()
    document.getElementById('box').addEventListener('scroll', this.handleScroll, true)
  },
  destroyed () {
    // document.getElementById('box').removeEventListener('scroll', this.handleScroll, true)
  },
  data () {
    return {
      imageUrl: '',
      info: {
        token: window.localStorage.getItem('token')
      },
      datalist: [],
      fixed: false,
      zan: false,
      Userlist: []
    }
  },
  methods: {
    show () {
      this.$router.push('/self/table')
    },
    back () {
      window.localStorage.clear()
      this.$router.push('/login')
    },
    post () {
      this.$router.push('/self/table1')
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    postArt () {
      this.$router.push('/post')
    },
    render () {
      http.get('/api/home', { params: this.info }).then(res => {
        this.datalist = res.data.msg
      })
    },
    renderUser () {
      http.get('/api/home/user', { params: this.info }).then(res => {
        this.Userlist = res.data.info
        console.log(this.Userlist)
      })
    },
    renderPho () {
      http.get('/api/self', { params: this.info }).then(res => {
        this.imageUrl = 'http://localhost:3000/' + res.data.msg[0].pho
      })
    },
    display (arr) {
      http.get('/api/home/look', { params: arr })
      this.$router.push({ name: 'show', params: { info: arr } })
    },
    add (arr) {
      this.zan = !this.zan
      if (this.zan) {
        http.put('/api/home/zan', { params: arr }).then(res => {
          console.log(res.data)
        })
      } else {
        http.get('/api/home/zan', { params: arr }).then(res => {
          console.log(res.data)
        })
      }
    },
    handleScroll () {
      const height = document.getElementById('box').scrollTop
      if (height > 100) {
        this.fixed = true
      } else {
        this.fixed = false
      }
    },
    chat () {
      this.$router.push('/chat')
    }
  }
}
</script>

<style lang="scss" scoped >
#box,#blackbox{
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('@/assets/home.jpg');
  background-position: center;
  background-size: cover;
  overflow: auto;
  .top,.newtop{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 2.5rem;
    list-style: none;
    li{
      line-height: 2.5rem;
      float: right;
      margin:0 3rem ;
      text-align: center;
      color: white;
      cursor:pointer;
      transition: all 1s;
      &:hover{
        transform: scale(1.2);
      }
    }
  }
  .newtop{
    background-color: bisque;
    opacity: .9;
    z-index: 2;
    li{
      color: black;
    }
  }
  .newbackground{
    background-color: aqua;
    z-index: 2;
  }
  .main{
    margin: 9.375rem auto;
    width: 75rem;
    .info,.list,.newinfo,.newlist{
      position: relative;
      opacity: .9;
      width: 12.5rem;
      height: 12.5rem;
      border-radius: 1.25rem;
      margin-left: 1.25rem;
      margin-bottom:1.875rem ;
      text-align: center;
      padding: 1.25rem;
      font-size: 1rem;
      backdrop-filter: blur(.625rem);
      background-image: url('@/assets/2.jpg');
      background-position: center;
      background-size: cover;
      .infoList{
        list-style: none;
        color: blue;
        .num{
          margin: 1.25rem;
          display: flex;
          justify-content: space-around;
          font-size: 1.5rem;
        }
        .txt{
          display: flex;
          justify-content: space-around;
          font-size: 1rem;
        }

      }
    }
    .list{
      position: relative;
      background-image: url('@/assets/1.jpg');
      background-position: center;
      background-size: cover;
    }

    .newinfo,.newlist{
      position: fixed;
      top:3.125rem;
    }
    .newlist{
      position: fixed;
      top: 17.5rem;
      background-image: url('@/assets/1.jpg');
    }

  }
}

.user{
  margin-top:1.25rem ;
  list-style: none;
  li{
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img{
      width: 40px;
      height:40px;
      border-radius: 50%;
      overflow: hidden;
    }
    i{
      cursor: pointer;
    }
  }
}
.el-avatar{
  cursor: pointer;
  transition: all 1s;
}
.el-avatar:hover{
  transform: scale(1.2);
}
.big{
  width: 100%;
    .Img{
      margin: auto;
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      border-radius: 50%;
      img{
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        transition: all 1s;
        cursor: pointer;
        &:hover{
          transform: scale(1.2);
        }
      }
    }
}

//文章
.art{
  list-style: none;

  li{
    padding: 1.25rem;
    background-color: aliceblue;
    border-radius:.625rem ;
    opacity: .9;
    height: auto;
    max-height: 25rem;
    overflow:hidden;
    margin-bottom:1.25rem ;
    .content_top{
      display: flex;
      height: 3.125rem;
      div{
        margin-left: 1rem;
        .font{
          font-size: 20px;
          margin-bottom: .625rem;
        }
        .date{
          font-size: 10px;
        }
      }
    }
    .content_bot{
      padding: .625rem;
      height: auto;
      max-height: 18.4375rem;
      overflow: hidden;
      cursor: pointer;
      .font{
        font-size: 1.125rem;
        margin: 1rem;
      }

    }
    .bott{
      padding:.3125rem .625rem;
      display: flex;
      justify-content: space-between;
      i{
        margin-right: .3125rem;
      }
      .newel-icon-thumb{
        color:#5698c3;
      }
    }
    img{
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
    }
  }
}

</style>
